<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局</title>
   <style>
       div{
           border: 1px solid red;
       }
       .left{
           width: 20%;
           float: left;
           height: 500px;
       }
       .center{
           width: 59%;
           float: left;
           height: 500px;
       }
       .right{
           width: 20%;
           float: left;
           height: 500px;
       }
       .fooler{
            clear: both;
           text-align: center;
           background: blue;
       }
   </style>
</head>
<body>
    <div>top1</div>
    <div>heat</div>
    <div class="left">left</div>


    <div class="center">center</div>
    <div class="right">right</div>
    <div class="fooler">fooler</div>

</body>
</html>